<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%pageContext.setAttribute("contextPath", request.getContextPath());%>
<link rel="shortcut icon" href="${contextPath}/images/logo_big.png" type="image/x-icon" />
<link rel="stylesheet" href="${contextPath}/lib/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${contextPath}/css/index.css"/>
<link rel="stylesheet" href="${contextPath}/css/main.css"/>
<link rel="stylesheet" href="${contextPath}/css/gqc.css"/>
<link rel="stylesheet" href="${contextPath}/lib/font-awesome/css/font-awesome.min.css">
<link href="${contextPath}/css/jquery.dataTables.css" rel="stylesheet">
<link href="${contextPath}/css/dataTables.tableTools.min.css" rel="stylesheet">
<link href="${contextPath}/lib/iCheck/skins/all.css" rel="stylesheet">
<link rel="stylesheet" href="${contextPath}/css/datatable.paginate.css"/>
<link type="text/css" rel="stylesheet" href="${contextPath}/lib/uploadify/uploadify.css"></link>

<title>DRG病例分组</title>
<style type="text/css">
	html {
	  position: relative;
	  min-height: 100%;
	}
	body {
	  /* Margin bottom by footer height */
	  margin-bottom: 60px;
	}
	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		/* Set the fixed height of the footer here */
		height: 60px;
		background-color: #f5f5f5;
	    border-top: 1px solid #ddd;
	    font-size: 0.9em;
	    font-weight: bold;
	    padding: 20px;
	    color: #666;
	}
	.step{
		display: inline-block;
		width:25%;
		min-width:100px;
		height:50px;
		float:left;
		color:#888;
		line-height:50px;
		font-size:18px;
		text-align:center;
		overflow:hidden;
		position:relative;
		background-color:#ebebeb;
		background-image: url(${contextPath}/images/navBtn.jpg);
		background-position: right bottom;
		background-repeat: no-repeat;
	}
	.step.current{
		color:white;
		background-color:#4285f4;
		background-image: url(${contextPath}/images/navCurrentBtn.jpg);
	}
	.step.lastDone{
		color:white;
		background-color:#15bb6b;
		background-image: url(${contextPath}/images/navLastDoneBtn.jpg);
	}
	.step.done{
		color:white;
		background-color:#15bb6b;
		background-image: url(${contextPath}/images/navDoneBtn.jpg);
	}
	section[id]{
		display: none;
	}
	section#step1{
		display: inherit;
	}
	#step2manually>div{
		max-width: 800px;
		padding:20px;
		margin:0 auto;
		margin-bottom: 20px;
		border: 1px solid #ddd;
		box-shadow: 0 5px 20px rgba(0,0,0,.2);
		overflow: hidden;
		background-color: #FFF;
	}
	#step2manually table{
		width:100%;
	}
	#step2manually table td{
		padding:5px;
		text-align: right;
	}
	#step2manually table td.title{
		padding:5px;
		text-align: left;
	}
	#diags,#opers{
		min-height:45px;
	}
	#diags>div,#opers>div{
		margin-bottom:5px;
		text-align: center;
	}
	#diags>div input.name,#opers>div input.name{
		min-width: 370px;
	}
	#diags>div input,#opers>div input{
		margin: 0 2px;
	}
	#step4 .panel{
		text-align: center;
	}
	#step4 .panel table{
    	font-size: 15px;
    	color: #4A4A4A;
	    width: 100%;
	}
	#step4 .panel table td{
		padding:5px;
	}
	.fa-arrow-circle-up,.fa-arrow-circle-down,.fa-minus-square{
		font-size:20px;
		cursor: pointer;
		color:#bbb;
	}
	.fa-arrow-circle-up:hover{
		color:#71d2d9;
	}
	.fa-arrow-circle-down:hover{
		color:#71d2d9;
	}
	.fa-minus-square:hover{
		color:#F87D7F;
	}
	.bg-blue{
		background-color: #71d2d9;
	}
	.ue-animation{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;-webkit-animation-duration:.8s;-webkit-animation-delay:.2s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:both;-moz-animation-duration:.8s;-moz-animation-delay:.2s;-moz-animation-timing-function:ease;-moz-animation-fill-mode:both;-ms-animation-duration:.8s;-ms-animation-delay:.2s;-ms-animation-timing-function:ease;-ms-animation-fill-mode:both;-o-animation-duration:.8s;-o-animation-delay:.2s;-o-animation-timing-function:ease;-o-animation-fill-mode:both;animation-duration:.8s;animation-delay:.2s;animation-timing-function:ease;animation-fill-mode:both}
	.ue-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake}
	@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);border:1px solid #aaa;}
	10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
	20%,40%,60%,80%{-webkit-transform:translateX(10px);border:1px solid red;}
	}
	@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);border:1px solid #aaa;}
	10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}
	20%,40%,60%,80%{-moz-transform:translateX(10px);border:1px solid red;}
	}
	@-o-keyframes shake{0%,100%{-o-transform:translateX(0);border:1px solid #aaa;}
	10%,30%,50%,70%,90%{-o-transform:translateX(-10px)}
	20%,40%,60%,80%{-o-transform:translateX(10px);border:1px solid red;}
	}
	@keyframes shake{0%,100%{transform:translateX(0);border:1px solid #aaa;}
	10%,30%,50%,70%,90%{transform:translateX(-10px)}
	20%,40%,60%,80%{transform:translateX(10px);border:1px solid red;}
	}
	.center-block{
		max-width: 400px;
		margin-top:100px;
		margin-bottom:100px;
		text-align:center;
		padding:50px;
		border-radius: 10px;
	    border: 1px solid #ddd;
	    box-shadow: 0 15px 80px rgba(0,0,0,.2);
	    background-color: white;
	}
	.version{
		font-size:10px;
		position: relative;
		top:-20px;
	}
</style>
</head>
<body style="min-width:480px;">
	<div class="container-fluid">
		<div class="row" style="min-width: 410px;">
			<div><h2 align="center">DRG病例分组<span class="label label-info version" title="测试版">Beta</span></h2></div>
			<div class="col-md-12">
				<div class="step one current"><span>1.选择录入方式</span></div>
				<div class="step two">2.录入病例信息</div>
				<div class="step three">3.进行分组</div>
				<div class="step four" style="background-image: none;">4.显示分组结果</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<section id="step1">
					<div class="center-block">
				      <button type="button" class="btn btn-default btn-lg btn-block" onclick="toStep2('manually')"><i class="fa fa-keyboard-o fa-lg"></i>&nbsp;&nbsp;手动录入</button>
				      <button type="button" class="btn btn-default btn-lg btn-block" onclick="toStep2('excel')"><i class="fa fa-file-excel-o fa-lg"></i>&nbsp;&nbsp;Excel导入</button>
				    </div>
				</section>
				
				<section id="step2manually">
					<div style="max-width: 800px;padding:20px;margin:0 auto;border: 1px solid #ddd;
					    box-shadow: 0 5px 20px rgba(0,0,0,.2);
					    overflow: hidden;
					    margin-bottom: 20px;">
				      <table>
				      	<tr class="bg-info"><td colspan="4" class="title">基本信息</td></tr>
				      	<tr><td colspan="2" rowspan="3"><div style="width:100px;height:100%;border:1px solid #888;color:#888;text-align: center;float:right;font-size:20px;"><i class="fa fa-user fa-5x"></i></div></td>
				      		<td>病案号：</td>
				      		<td><input type="input" class="form-control" id="CASE_ID"></td>
				      	</tr>
				      	<tr>
				      		<td>性别：</td>
				      		<td style="text-align: left;">
				      			<input type="radio" class="form-control gender" name="gender" value="男" checked="checked">男
				      			&nbsp;&nbsp;&nbsp;&nbsp;
				      			<input type="radio" class="form-control gender" name="gender" value="女">女
				      		</td>
				      	</tr>
				      	<tr>
				      		<td>年龄：</td>
				      		<td><input type="number" class="form-control ue-animation" id="AGE" min="0" required="required"></td>
				      	</tr>
				      	<tr>
				      		<td width="150">住院天数：</td>
				      		<td width="120"><input type="number" class="form-control" id="ACCTUAL_DAYS" min="0"></td>
				      		<td width="180">住院费用：</td>
				      		<td><input type="number" class="form-control" id="TOTAL_EXPENSE" min="0"></td>
				      	</tr>
				      	<tr>
				      		<td>离院方式：</td>
				      		<td><select class="form-control" id="SF0108">
				      				<option value="1">医嘱离院</option>
				      				<option value="2">医嘱转院</option>
				      				<option value="3">医嘱转卫生服务机构或乡镇卫生院</option>
				      				<option value="4">非医嘱离院</option>
				      				<option value="5">死亡</option>
				      				<option value="9">其他</option>
				      			</select>
				      		</td>
				      		<td>新生儿年龄（天）：</td>
				      		<td><input type="number" class="form-control" id="SF0100" min="0"></td>
				      	</tr>
				      	<tr>
				      		<td>新生儿入院体重（克）：</td>
				      		<td><input type="number" class="form-control" id="SF0102" min="0"></td>
				      		<td>呼吸机使用时间（小时）：</td>
				      		<td><input type="number" class="form-control" id="SF0104" min="0"></td>
				      	</tr>
				      	<tr>
				      		<td>主要诊断编码：</td>
				      		<td><input type="input" class="form-control ue-animation" id="DISEASE_CODE" required="required"></td>
				      		<td>主要诊断名称：</td>
				      		<td><input type="input" class="form-control" id="DISEASE_NAME"></td>
				      	</tr>
				      	<tr class="bg-info">
				      		<td colspan="4" class="title">其他诊断<button onclick="addRow('diags')" class="btn btn-default btn-xs pull-right">添加诊断</button></td>
				      	</tr>
				      	<tr>
				      		<td colspan="4" id="diags">
				      			<div class="form-inline">
				      				<span>诊断编码：</span>
					      			<input type="input" class="form-control code" style="margin:0;">
						      		<span>诊断名称：</span>
						      		<input type="input" class="form-control name" style="margin:0;">
						      		<i title="向上" class="fa fa-arrow-circle-up"></i>
						      		<i title="向下" class="fa fa-arrow-circle-down"></i>
						      		<i title="删除" class="fa fa-minus-square"></i>
				      			</div>
				      		</td>
				      	</tr>
				      	<tr class="bg-info">
				      		<td colspan="4" class="title">手术信息<button onclick="addRow('opers')" class="btn btn-default btn-xs pull-right">添加手术</button></td>
				      	</tr>
				      	<tr>
				      		<td colspan="4" id="opers">
				      			<div class="form-inline">
				      				<span>手术编码：</span>
					      			<input type="input" class="form-control code" style="margin:0;">
						      		<span>手术名称：</span>
						      		<input type="input" class="form-control name" style="margin:0;">
						      		<i title="向上" class="fa fa-arrow-circle-up"></i>
						      		<i title="向下" class="fa fa-arrow-circle-down"></i>
						      		<i title="删除" class="fa fa-minus-square"></i>
				      			</div>
				      		</td>
				      	</tr>
				      	<tr class="bg-info">
				      		<td colspan="4" class="title">分组器版本</td>
				      	</tr>
				      	<tr>
				      		<td colspan="4">
				      			<div class="form-inline" style="text-align: left;">
				      				<span>分组器版本：</span>
					      			<select class="groupVersion form-control">
										<option value="北京2014版">北京2014版</option>
										<option value="北京2015版" selected="selected">北京2015版</option>
										<option value="CC">CC</option>
										<option value="CC2015版">CC2015</option>
					  				</select>
				      			</div>
				      		</td>
				      	</tr>
				      </table>
				      <!-- 
				      <button class="btn btn-default pull-right" style="margin-left:10px;" onclick="toStep3('patient')">下一步</button>
				       -->
				      <button class="btn btn-primary pull-right" style="margin-left:10px;" onclick="doGroup('patient')">开始分组</button>
				      <button class="btn btn-default pull-right" onclick="toStep1()">上一步</button>
				      <%-- 
				      <c:if test="${!jCaptchaDisabled}">
		                	<div class="form-group input-group pull-right" style="width:200px;">
						    	<span class="input-group-addon"><img src="jcaptcha.jpg" id="checkCode" onclick='refreshCode()' class="checkCode"/></span>
								<input type="text" id="jCaptchaCode" name="jCaptchaCode" value="" class="form-control" placeholder="验证码"  autocomplete="off"/>
								<div style="width:120px;"></div>
							</div>
		              </c:if>
		               --%>
				      <div class="panel panel-success" id="resultPanel" style="margin-top:50px;">
						  <!-- Default panel contents -->
						  <div class="panel-heading">分组结果</div>
						  <div class="panel-body"></div>
					  </div>
				    </div>
				</section>
				
				<section id="step2excel">
					<div class="center-block">
				        <input id="medicalRecord_upload" type="file" name="file" style="display: none;"/>
				        <div>
				        	<a download="首页模板.xls" href="${contextPath}/images/medicalRecord.xls" class="link text-sm" title="下载首页数据模板格式">
				        		<i class="fa fa-download"></i>&nbsp;首页数据模板
				        	</a>
				        </div>
				        <span style="width:85px;float: left;margin-top: 15px;text-align: right;">分组器版本：</span>
						<select class="groupVersion form-control" style="width: 120px;margin:5px;float: left;">
							<option value="北京2014版">北京2014版</option>
							<option value="北京2015版" selected="selected">北京2015版</option>
							<option value="CC">CC</option>
							<option value="CC2015版">CC2015</option>
						</select>
						<!-- <div>
							<a href="javascript:$('#medicalRecord_upload').uploadify('upload', '*')"><i class="fa fa-play fa-lg"></i>&nbsp;上传</a>&nbsp;|&nbsp;
							<a href="javascript:$('#medicalRecord_upload').uploadify('stop')"><i class="fa fa-stop"></i>&nbsp;停止</a>&nbsp;|&nbsp; 
							<a href="javascript:$('#medicalRecord_upload').uploadify('cancel', '*')"><i class="fa fa-times-circle fa-lg"></i>&nbsp;取消</a>
						</div> -->
				    </div>
				    <button class="btn btn-primary pull-right" style="margin-left:10px;" onclick="toStep3('excel')">开始分组</button>
				    <button class="btn btn-default pull-right" onclick="toStep1()">上一步</button>
				</section>
				
				<section id="step3">
			        <div style="position: relative;width: 80%;margin:0 auto;text-align: center;font-size: 20px;color:#05272D;overflow:hidden; height: 200px;">
						<div id="progress_info" style="position: absolute;bottom:0;width: 100%;"></div>
						<div id="progress_info_detail" style="position: absolute;bottom:0;right:0;text-align:right; width: 50%;color: #888;font-size: 16px;"></div>
						<div style="position: absolute;bottom:0;left:0;text-align:left; width: 50%;color: #888;font-size: 26px;"><i class="fa fa-cog fa-spin"></i></div>
					</div>
					
					<!-- 进度条 -->
				    <div class="progress" style="width: 80%;margin: 0 auto;">
					  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100">
					    <span></span>
					  </div>
					</div>
					
					<div style="position: relative;width: 80%;margin:0 auto;text-align: center;height: 22px;font-size: 20px;overflow:hidden;">
						<div id="progress_usedtime" style="position: absolute;left:0;text-align:left; width: 50%;color: #888;font-size: 16px;"></div>
						<!-- 
						<div style="position: absolute;right:0;text-align:right; width: 50%;color: #888;font-size: 16px;">预计剩余时间：<span id="progress_time" style="width:110px;display: inline-block;"></span></div>
						 -->
					</div>
				</section>
				
				<section id="step4">
					<div class="panel panel-success"></div>
				    <div id="resultTableDiv"></div>
				    <!-- <button class="btn btn-primary pull-right" onclick="reGroup()">重新分组</button> -->
				</section>
			</div>
		</div>
	</div>
<script src="${contextPath}/lib/jquery-1.8.3.min.js"></script>
<script src="${contextPath}/lib/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="${contextPath}/lib/iCheck/icheck.min.js"></script>
<!-- dataTable -->
<script src="${contextPath}/lib/datatable/jquery.dataTables.js"></script>
<script src="${contextPath}/lib/datatable/dataTables.tableTools.js"></script>
<script src="${contextPath}/lib/datatable/datatable.paginate.js"></script>
<script src="${contextPath}/js/datatable.js"></script>

<script src="${contextPath}/lib/uploadify/jquery.uploadify.min.js"></script>
<script src="${contextPath}/js/uploadify/event_common.js"></script>
<script src="${contextPath}/js/dataMonitor/drgsGroupFree.min.js"></script>
<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' // optional
  });
});
function refreshCode() {
	$("#checkCode").attr("src","jcaptcha.jpg?time="+new Date().getTime());
}
</script>
	<div class="footer"><span>Copyright © 2013-<%=new SimpleDateFormat("yyyy").format(new Date()) %> 东华软件股份公司 V2.2.1 Beta&nbsp;&nbsp;</span></div>
	<div id="console_drgs" style="display: none;"><section><span></span>&nbsp;<i class="fa fa-terminal"></i></section></div>
</body>
</html>